<!--
 * @Author: modefy
 * @Date: 2023-05-11 11:24:07
 * @LastEditors: modefy
 * @LastEditTime: 2023-05-15 17:23:17
 * @Description: Description
-->
<template>
  <div class="home-container">
    <div class="top-card">
      <rect-card
        v-for="(item, index) in cardData"
        :key="index"
        :data="item"
      ></rect-card>
    </div>

    <div class="card">
      <to-do-list></to-do-list>
      <quadrant></quadrant>
    </div>
    <div class="tinymce">
      <div class="title">知识共享</div>
      <div class="editor-content" v-html="content" />
    </div>
    <div class="chart-container">
      <div class="chart-card chart-card1">
        <div class="tit">图书分类</div>
        <home-chart1></home-chart1>
      </div>
      <div class="chart-card chart-card2">
        <div class="tit">技术热度分析</div>
        <home-chart2></home-chart2>
      </div>
      <div class="chart-card chart-card3">
        <div class="tit">服装统计</div>
        <home-chart3></home-chart3>
      </div>
      <div class="chart-card chart-card4">
        <div class="tit">景点推荐</div>
        <home-chart4></home-chart4>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'
import rectCard from '@/components/common/rect-card.vue'
import homeChart1 from '@/components/business/home-chart1.vue'
import homeChart2 from '@/components/business/home-chart2.vue'
import homeChart3 from '@/components/business/home-chart3.vue'
import homeChart4 from '@/components/business/home-chart4.vue'
import ToDoList from '@/components/common/todo-list/Index.vue'
import Quadrant from '@/components/common/quadrant/index.vue'
import { getHomeList } from '@/service/home/home'

import card1 from '@/assets/images/1.jpg'
import card2 from '@/assets/images/2.jpg'
import card3 from '@/assets/images/3.jpg'
import card4 from '@/assets/images/4.jpg'

const cardData = ref([
  {
    img: card1,
    title: '访问量',
    field: 'visit',
    value: 0
  },
  {
    img: card2,
    title: '收藏',
    field: 'collection',
    value: 0
  },
  {
    img: card3,
    title: '书籍',
    field: 'books',
    value: 0
  },
  {
    img: card4,
    title: '随笔',
    field: 'essay',
    value: 0
  }
])
const content = ref('')
const reload = () => {
  content.value = localStorage.getItem('content')
}
reload()
onMounted(async () => {
  const result = await getHomeList()
  cardData.value.forEach((item) => {
    item.value = result[item.field]
  })
})
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;

  .top-card {
    display: flex;
    justify-content: space-between;
  }
  .tinymce {
    margin-top: 30px;
    padding: 10px 0;
    width: 100%;
    height: 300px;
    background-color: #fff;
    .title {
      height: 20px;
      line-height: 15px;
      padding: 0 20px;
      border-bottom: 1px solid #eee;
      font-family: Albbpht;
    }
  }

  .chart-container {
    margin-top: 20px;
    background-color: #fff;
    width: 100%;
    height: 675px;
    border-radius: 3px;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px 15px;
    padding-top: 20px;
    box-sizing: border-box;

    .chart-card {
      width: 800px;
      height: 305px;
      border: 1px solid #eee;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
      padding-top: 22px;

      .tit {
        position: absolute;
        top: 20px;
        left: 22px;
        font-family: Albbpht;
      }
    }
  }

  .card {
    margin-top: 10px;
    display: flex;
    background-color: #fff;
    padding: 20px 0 10px 0;
  }
}
</style>
